<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-22 18:25:41
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-25 13:06:19
 * @FilePath: /h-radar-expose/pages/Exposure/ExposeList/codeDetial.vue
 * @Description:
-->
<template>
  <LayoutDetail
    :title-btn="titleBtn"
    :left-num="2"
    :head-num="3"
    :tabs-list="tabsList"
    :tab-active="tabActive"
    :showRightHead="showRightHead"
    @showPrompt="showPrompt"
  >
    <!-- 左侧 -->
    <template #title>
      <el-tooltip effect="dark" :content="basicInfo.name" placement="bottom">
        <span>{{ basicInfo.name }}</span>
      </el-tooltip>
    </template>
    <template #content-title-1>基本信息</template>
    <template #content-body-1>
      <LayoutInfoList :info-list="infoList"></LayoutInfoList>
    </template>
    <template #content-title-2>标签</template>
    <template #content-body-2>
      <TagManip
        :dynamic-tags="basicInfo.tag"
        @handleClose="delTag"
        @handleAdd="addTag"
      ></TagManip>
    </template>
    <!--右侧 -->
    <template #tab-content-assetProfile>
      <LayoutDraw :left-num="2">
        <template #content-title-1>基础信息</template>
        <template #content-body-1>
          <LayoutFormList :form-list="baseInfo"></LayoutFormList>
        </template>
        <template #content-title-2>采购供应链信息</template>
        <template #content-body-2>
          <vul-table ref="table" v-bind="tableConfig"></vul-table>
        </template>
        <template #right-title>资产变更记录</template>
        <template #right-body>
          <LayoutNoticeList :notice-list="noticeList"></LayoutNoticeList>
        </template>
      </LayoutDraw>
    </template>
    <template #tab-content-exposurePath> </template>
    <template #tab-content-associatedExposure> </template>
    <template #tab-content-surfaceAnalysis> </template>
  </LayoutDetail>
</template>

<script lang="ts" setup>
import LayoutDetail from '@/components/Expose/Layout/Detail.vue';
import LayoutInfoList from '@/components/Expose/Layout/InfoList.vue';
import LayoutFormList from '@/components/Expose/Layout/FormList.vue';
import LayoutExpandableBox from '@/components/Expose/Layout/ExpandableBox.vue';
import LayoutNoticeList from '@/components/Expose/Layout/NoticeList.vue';
import LayoutDraw from '@/components/Expose/Layout/Draw.vue';
import GraphExposurePath from '@/components/Expose/Graph/ExposurePath.vue';
import GraphExposureSurface from '@/components/Expose/Graph/ExposureSurface.vue';
import GraphSurfaceAnalysis from '@/components/Expose/Graph/SurfaceAnalysis.vue';
import ModelList from '@/components/Expose/ModelList.vue';
import TagManip from '@/components/Expose/TagManip.vue';
import AssessmentBlock from '@/components/Expose/AssessmentBlock.vue';
import ShowCode from '@/components/Expose/ShowCode.vue';
import noData from '@/components/Expose/noData.vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { usewebDetail } from '@/composables/Expose/usewebDetail';
import { useStore } from 'vuex';
const store = useStore();
const {
  detialInfo,
  basicInfo,
  delTag,
  addTag,
  showPrompt,
  category,
  changeList,
  getDetialById,
  getLeftBaseInfo,
  getAssetChanged,
} = usewebDetail();
const route = useRoute();
const id = ref(route.query.id || '');
const tabActive = ref('assetProfile');
const tabsList = ref([
  {
    name: 'assetProfile',
    label: '资产画像',
    disabled: false,
  },
]);
const tableConfig = reactive({
  uri: 'detail/getSupplierList',
  params: {
    pageNumber: 1,
    pageSize: 10,
    enterpriseSupplierId: id,
  },
  tableAttr: {
    'max-height': '605px',
  },
  columns: [
    {
      label: '合同名',
      prop: 'contractName',
      render: (h, c) => {
        let val = c.row.contractName;
        let url = c.row.sourceUrl;
        if (url) {
          return (
            '<a href="' +
            url +
            '" target="_blank" style="color: #0289f7; text-decoration: none;">' +
            val +
            '</a>'
          );
        } else {
          return '<span>' + val + '</span>';
        }
      },
    },
    {
      label: '时间',
      prop: 'contractTime',
      width: 180,
    },
  ],
});
const showRightHead = ref(false);

const titleBtn = computed(() => {
  const urlList = ['http', 'https'];
  let array = [
    {
      flag: 'url',
      tip: '访问',
      icon: 'vul-icon-url',
    },
  ];

  if (!urlList.includes(detialInfo.value.protocol)) {
    array = array.filter((el) => el.flag !== 'url');
  }

  return array;
});
const infoList = computed(() => {
  const { dataStatus, isAlive, createTime, updateTime, company } =
    basicInfo.value;

  const foundStatus = store.state.enum.assetStatus.find(
    (status) => status.type === parseInt(dataStatus),
  );

  return [
    {
      label: '更新状态',
      icon: 'vul-icon-type',
      type: 'tag',
      tag: foundStatus ? foundStatus.tag : '',
      content: foundStatus ? foundStatus.value : '未知',
    },
    {
      label: '存活状态',
      icon: 'vul-icon-type',
      type: 'img',
      src: isAlive
        ? require(`@/static/images/icon/survival-${parseInt(isAlive)}.png`)
        : '',
    },
    {
      label: '首次发现',
      icon: 'vul-icon-time',
      content: createTime,
    },
    {
      label: '数据更新',
      icon: 'vul-icon-time',
      content: updateTime,
    },
    {
      label: '所属单位',
      icon: 'vul-icon-company',
      content: company,
    },
  ];
});
const baseInfo = computed(() => {
  const { name } = detialInfo.value;
  return [
    {
      label: '供应商名称',
      content: name,
    },
  ];
});
const noticeList = computed(() => {
  return changeList.value.map(
    ({ fieldAlias, newValue, oldValue, changeTime, opType }) => {
      const btn = store.state.enum.changeStatus.find(
        ({ type }) => type === opType,
      );

      return {
        title: fieldAlias,
        content: opType === 3 ? oldValue : newValue,
        time: changeTime,
        type: btn ? btn.tag : '',
        typeText: btn ? btn.value : '',
      };
    },
  );
});

onMounted(async () => {
  category.value = 'supplier';
  await getDetialById('detail/getSupplierById');
  await getLeftBaseInfo();
  await getAssetChanged();
});
</script>
<style lang="scss" scoped>
.table-search {
  margin-top: $-v-spacing-horizontal-base;
  text-align: right;
}
</style>
